<template>
  <el-form class="form" ref="form" :rules="rules" :model="form" label-position="top" size="small">
    <el-form-item label="过滤器名称" prop="name">
      <el-input v-model="form.name" placeholder="请填写过滤器名称" :maxlength="50"></el-input>
    </el-form-item>
    <el-form-item
        label="工单条件筛选"
        prop="filters"
        v-if="this.isShowRule === 2"
    >
      <conditionForm
        :fieldsList="filterFieldList"
        :conditonList="form.filters"
        class="condition"
        type="filter"
      >
    </conditionForm>
    </el-form-item>
    <el-form-item label="查看过滤器及工单权限" prop="readScopeList">
      <optionalScope class="width-500" key="readScopeList" :isCheckbox="true" :tabs="tabs" :width="500" :value="form.readScopeList">
      </optionalScope>
    </el-form-item>
    <el-form-item label="编辑工单权限" prop="updateScopeList">
      <optionalScope class="width-500" key="updateScopeList" :isCheckbox="true" :tabs="tabs" :width="500" :value="form.updateScopeList">
      </optionalScope>
    </el-form-item>
    <el-form-item label="调整当前处理人权限" prop="masterScopeList">
      <optionalScope class="width-500" key="masterScopeList" :isCheckbox="true" :tabs="tabs" :width="500" :value="form.masterScopeList">
      </optionalScope>
    </el-form-item>
     <el-form-item label="导出工单权限" prop="exportScopeList">
      <optionalScope class="width-500" key="exportScopeList" :isCheckbox="true" :tabs="tabs" :width="500" :value="form.exportScopeList">
      </optionalScope>
    </el-form-item>
     <el-form-item label="终止工单权限" prop="terminalScopeList">
      <optionalScope class="width-500" key="terminalScopeList" :isCheckbox="true" :tabs="tabs" :width="500" :value="form.terminalScopeList">
      </optionalScope>
    </el-form-item>
     <el-form-item label="删除工单权限" prop="deleteScopeList">
      <optionalScope class="width-500" key="deleteScopeList" :isCheckbox="true" :tabs="tabs" :width="500" :value="form.deleteScopeList">
      </optionalScope>
    </el-form-item>
  </el-form>
</template>

<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator'
import conditionForm from '@/afterSales/components/conditionFilter/conditionForm.vue'
import { CommonModule } from '@/store/modules/common'
import { busConfigStore } from '@/afterSales/views/config/serviceConfig/store/busConfigStore'
import optionalScope from '../../components/optionalScope.vue'
import { commonAction } from '@/utils/common';
import { filterFieldAllList } from '../../../../business/utils/staticData'
// eslint-disable-next-line no-restricted-imports
import { cloneDeep } from 'lodash'

const obj = {
  role: [],
  dept: [],
  user: [],
  service: [],
  technology: []
}
@Component({
  name: 'editFilterSetting',
  components: {
    conditionForm,
    optionalScope
  }
})
export default class EditFilterSetting extends Vue {
  @Prop() private id!: string
  private $route: any;
  private $message: any
  private isShowRule: any = 2

  public form: any = {
    name: '',
    filters: [],
    readScopeList: cloneDeep(obj),
    deleteScopeList: cloneDeep(obj),
    terminalScopeList: cloneDeep(obj),
    masterScopeList: cloneDeep(obj),
    updateScopeList: cloneDeep(obj),
    exportScopeList: cloneDeep(obj),
    status: 1,
    type: 2
  }

  public init (data) {
    this.isShowRule = data.type
    if ((this.$refs as any).form) {
      (this.$refs as any).form.clearValidate()
    }
    const { readScopeList, deleteScopeList, id, terminalScopeList, filters, masterScopeList, name, updateScopeList, exportScopeList, status, type } = data
    if (data.id) {
      this.form = {
        readScopeList: readScopeList || cloneDeep(obj),
        deleteScopeList: deleteScopeList || cloneDeep(obj),
        id,
        terminalScopeList: terminalScopeList || cloneDeep(obj),
        filters: filters || [],
        masterScopeList: masterScopeList || cloneDeep(obj),
        name,
        updateScopeList: updateScopeList || cloneDeep(obj),
        exportScopeList: exportScopeList || cloneDeep(obj),
        status,
        type
      }
    } else {
      this.form = {
        name: '',
        filters: [],
        readScopeList: cloneDeep(obj),
        deleteScopeList: cloneDeep(obj),
        terminalScopeList: cloneDeep(obj),
        masterScopeList: cloneDeep(obj),
        updateScopeList: cloneDeep(obj),
        exportScopeList: cloneDeep(obj),
        status: 1,
        type: 2
      }
    }
  }

  private options = Object.freeze([
    {
      label: '开启',
      value: 1
    },
    {
      label: '关闭',
      value: 0
    }
  ])

  private get userList () {
    return (CommonModule as any).publicCache.userList.map(v => ({ name: `${v.agentName} 【${v.agentNumber}】`, _id: v._id }))
  }

  private get filterFieldList () {
    const filterFieldAllListNew = filterFieldAllList.filter(item => {
      return item.businessId !== 'createUser' && item.businessId !== 'orderCategory'
    })
    const busConfigStoreNew = busConfigStore.list.filter(item => {
      return ['group'].indexOf(item.fieldType) === -1 && item.isSystem === 0
    })
    return [...filterFieldAllListNew, ...busConfigStoreNew]
  }

  private get tabs () {
    return [
      {
        name: '成员',
        type: 'user',
        list: this.userList,
        listMap: (CommonModule as any).publicCache.userListObj,
        defaultProps: { id: '_id', name: 'name' }
      },
      {
        name: '技能组',
        type: 'technology',
        list: (CommonModule as any).publicCache.queueList,
        listMap: (CommonModule as any).publicCache.queueListObj,
        defaultProps: { id: '_id', name: 'name' }
      },
      {
        name: '服务组',
        type: 'service',
        list: busConfigStore.serviceList,
        listMap: busConfigStore.serviceMap,
        defaultProps: { id: 'id', name: 'name' }
      },
      {
        name: '部门',
        type: 'dept',
        list: (CommonModule as any).publicCache.departmentTree?.tree || [],
        listMap: (CommonModule as any).publicCache.departmentListObj,
        defaultProps: {
          children: 'children',
          label: 'name',
          name: 'name',
          id: '_id'
        }
      },
      {
        name: '角色',
        type: 'role',
        list: (CommonModule as any).publicCache.roleList,
        listMap: (CommonModule as any).publicCache.roleListObj,
        defaultProps: { id: '_id', name: 'name' }
      }
    ]
  }

  private rules = {
    name: [
      { required: true, message: '请填写过滤器名称', trigger: 'blur' }
    ]
  }

  public saveConfirm () {
    for (let j = 0; j < this.form.filters.length; j++) {
      for (let i = 0; i < this.form.filters[j].length; i++) {
        if (this.form.filters[j][i].businessId === '') {
          this.$message.warning('筛选条件不能有空值！')
          return false
        } else {
          if (this.form.filters[j][i].filterValue === '' && (this.form.filters[j][i].filterType === 7 || this.form.filters[j][i].filterType === 8)) {
            continue
          } else if ((this.form.filters[j][i].filterType === 9 || this.form.filters[j][i].filterType === 16) && this.form.filters[j][i].minFilterValue !== '' && this.form.filters[j][i].maxFilterValue !== '') {
            continue
          } else if (this.form.filters[j][i].filterValue !== '' && (this.form.filters[j][i].filterType === 9 || this.form.filters[j][i].filterType === 16)) {
            this.$message.warning('筛选条件不能有空值！')
            return false
          } else if (this.form.filters[j][i].filterValue === '') {
            this.$message.warning('筛选条件不能有空值！')
            return false
          }
        }
      }
    }

    (this.$refs as any).form.validate((valid) => {
      if (valid) {
        const params = Object.assign({}, this.form, {
          modelId: this.$route.params.businessId
        })
        commonAction({ url: `/server-work/action/filter/config/${this.form.id ? 'update' : 'insert'}`, method: 'post', data: params }).then(res => {
          if (res.success) {
            this.$message.success('成功！')
            this.$emit('success')
          }
        })
      } else {
        return false;
      }
    });
  }
}
</script>

<style lang="stylus" scoped>
.form
  /deep/ .el-form-item--small .el-form-item__label
    line-height: 16px
    padding-bottom: 8px
  /deep/ .el-form-item--small.el-form-item
    margin-bottom: 24px
</style>
